<template>
  <view>
    <z-paging ref="pagingRef" v-model="dataList" :auto="false" @query="queryList">
      <template v-if="queryParams.type === 2" #empty>
        <mt-empty-view
          url="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/anquan.png"
          :image-style="{ width: '468rpx', height: '348rpx' }"
        >
          <view class="text-28rpx text-#727687 text-center">当前您没有被投诉信息，请继续保持</view>
        </mt-empty-view>
      </template>
      <template #top>
        <view class="top-block">
          <mt-navbar title="我的投诉" bg-color="#1484EE" left-icon-color="#ffffff" :title-style="{ color: '#ffffff' }">
            <template v-if="user.userInfo.serviceProviderFlag" #center>
              <view class="flex w-460rpx items-center justify-around">
                <text class="text-32rpx text-#ffffff" :style="{ opacity: queryParams.type === 1 ? '1' : '0.5' }" @click="handleChangeType(1)"
                  >我投诉的</text
                >
                <text class="text-32rpx text-#ffffff" :style="{ opacity: queryParams.type === 2 ? '1' : '0.5' }" @click="handleChangeType(2)"
                  >我被投诉</text
                >
              </view>
            </template>
          </mt-navbar>
          <view :key="queryParams.type" class="drop-box">
            <view class="custom-drop h-44px">
              <uv-tabs
                v-if="showTabs"
                :list="tabList"
                :current="currentTab"
                :active-style="{ color: '#1484EE', fontWeight: 'bold' }"
                :inactive-style="{ color: '#727687' }"
                line-width="32"
                line-color="#1484EE"
                @click="tabsChange"
              ></uv-tabs>
            </view>
            <view class="flex items-center px-16rpx" style="box-shadow: 0rpx 0rpx 44rpx 0rpx rgba(0, 0, 0, 0.15)" @click="handleOpenCategory">
              <text class="text-28rpx text-#1C213E mr-4rpx">筛选</text>
              <uv-icon name="arrow-down-fill" color="#727687" size="20rpx"></uv-icon>
            </view>
          </view>
        </view>
      </template>
      <view class="px-32rpx pt-16rpx">
        <view v-for="item in dataList" :key="item.id" class="list-li bg-#ffffff mb-24rpx px-32rpx py-32rpx rd-8rpx" @click="goDetail(item)">
          <view class="flex items-center justify-between pb-8rpx">
            <view class="flex-1 min-w-0 mr-10rpx">
              <text class="text-32rpx text-#1A1A1A font-bold">{{ item.productName }}</text>
            </view>
            <view v-if="item.complaintStatus === 0" class="flex items-center">
              <image
                class="w-32rpx h-32rpx"
                src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-release-status6.svg"
              ></image>
              <text class="text-24rpx text-#1484EE ml-8rpx">处理中</text>
            </view>
            <view v-if="item.complaintStatus === 1" class="flex items-center">
              <image
                class="w-32rpx h-32rpx"
                src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-release-status4.svg"
              ></image>
              <text class="text-24rpx text-#28B094 ml-8rpx">处理完成</text>
            </view>
          </view>
          <view class="mt-24rpx flex bg-#F5F5F5 p-16rpx">
            <view class="w-162rpx text-right text-24rpx text-#727687">所属分类：</view>
            <view class="flex-1 min-w-0 text-24rpx text-#727687 break-all">{{ item.productCategoryParentName }}</view>
          </view>
          <view v-if="item.complaintServiceProviderName" class="mt-24rpx flex">
            <view class="w-180rpx text-right text-28rpx text-#727687">投诉盟商：</view>
            <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all"
              >{{ item.complaintServiceProviderName }} {{ item.complaintServiceProviderPhone }}</view
            >
          </view>
          <view class="mt-24rpx flex line-height-28rpx">
            <view class="w-180rpx text-right text-28rpx text-#727687">投诉时间：</view>
            <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all">{{ dayjs(item.complaintTime).format('YYYY-MM-DD') }}</view>
          </view>
          <view class="mt-24rpx flex">
            <view class="w-180rpx text-right text-28rpx text-#727687">投诉内容：</view>
            <view class="flex-1 min-w-0 text-28rpx text-#1C213E">{{ item.complaintContent }}</view>
          </view>
          <view v-if="item.complaintStatus === 0" class="mt-24rpx flex">
            <view class="w-180rpx text-right text-28rpx text-#727687">上传证据：</view>
            <view class="flex-1 min-w-0">
              <view
                v-for="(son, sidx) in item.complaintEvidenceUrls"
                :key="sidx"
                class="w-420rpx break-all mb-8rpx text-28rpx text-#007BFF ellipsis decoration-underline"
                @click.stop="previewDocument(son.url)"
                >{{ son.name }}</view
              >
            </view>
          </view>
          <view v-if="item.complaintStatus === 1" class="mt-24rpx flex bg-[rgba(40,176,148,0.05)] p-16rpx">
            <view class="w-190rpx flex items-center">
              <uv-icon name="file-text" color="#28B094" size="36rpx"></uv-icon>
              <text class="text-28rpx text-#28B094 ml-8rpx">处理结果：</text>
            </view>
            <view class="flex-1 min-w-0 text-28rpx text-#28B094 break-all">{{ item.complaintResultContent }}</view>
          </view>
        </view>
      </view>
    </z-paging>

    <mt-more-column-checkbox
      ref="categoryRef"
      v-model="category"
      label="productCategoryName"
      :list="categoryArr"
      @confirm="handleCategoryConfirm"
    ></mt-more-column-checkbox>
  </view>
</template>

<script setup>
import { cluegetComplaintPage, cluegetComplaintStatusCount } from '@/subClue/api/index';
import { productCategorygetProductCategoryTreeApp } from '@/api/mixed';
import { previewDocument } from '@/utils/tools';
import dayjs from 'dayjs';
import userStore from '@/store/user';
const user = userStore();

const tabList = ref([
  {
    name: '全部',
    type: null,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#1484EE'
    }
  },
  {
    name: '处理中',
    type: 0,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  },
  {
    name: '处理完成',
    type: 1,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  }
]);
// 当前选中的 tab 索引
const currentTab = ref(0);
// 切换 tab 状态
function tabsChange(e) {
  currentTab.value = e.index;
  for (let item of tabList.value) {
    item.badge.color = '#727687';
  }

  tabList.value[e.index].badge.color = '#1484EE';
  pagingRef.value.reload();
}

const queryParams = ref({
  type: 1
});

function handleChangeType(num) {
  queryParams.value.type = num;
  getNum();
  pagingRef.value.reload();
}

const categoryRef = ref();
function handleOpenCategory() {
  categoryRef.value.open();
}

const categoryArr = ref([]);
const category = ref([]);
function handleCategoryConfirm() {
  getNum();
  pagingRef.value.reload();
}

function goDetail(item) {
  uni.navigateTo({
    url: `/subClue/pages/complaintDetail?id=${item.id}`
  });
}

function getSelect() {
  productCategorygetProductCategoryTreeApp().then((res) => {
    categoryArr.value = res.data;
  });
}

const showTabs = ref(false);
function getNum() {
  showTabs.value = false;
  cluegetComplaintStatusCount({
    type: queryParams.value.type,
    productCategoryIds: category.value
  }).then((res) => {
    for (const item of tabList.value) {
      if (item.type === null) {
        item.badge.value = res.data[-1];
      } else {
        item.badge.value = res.data[item.type];
      }
    }
    setTimeout(() => {
      showTabs.value = true;
    }, 100);
  });
}

// 分页 ref
const pagingRef = ref(null);
const dataList = ref([]);
const lastId = ref('');

// 请求列表数据
async function queryList(pageNum, pageSize) {
  try {
    const params = {
      pageNum: pageNum,
      pageSize: pageSize,
      lastId: pageNum === 1 ? '' : lastId.value,
      type: queryParams.value.type,
      complaintStatus: tabList.value[currentTab.value].type,
      productCategoryIds: category.value
    };
    const res = await cluegetComplaintPage(params);
    const list = res.data.items;
    for (const item of list) {
      const p_name = JSON.parse(item.productCategoryName);
      item.productCategoryParentName = p_name[0];
      item.productCategoryName = p_name[1];
      item.complaintEvidenceUrls = item.complaintEvidenceUrls ? JSON.parse(item.complaintEvidenceUrls) : [];
      item.complaintResultFileUrls = item.complaintResultFileUrls ? JSON.parse(item.complaintResultFileUrls) : [];
    }
    lastId.value = list[list.length - 1]?.id;

    pagingRef.value.complete(list);
  } catch (e) {
    pagingRef.value.complete(false);
  }
}

onLoad(() => {
  getSelect();
  uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#1484EE'
  });
});

onShow(() => {
  getNum();
  nextTick(() => {
    pagingRef.value.refresh();
  });
});
</script>

<style lang="scss" scoped>
.drop-box {
  position: relative;
  display: flex;
  background-color: #ffffff;
  box-shadow: 0 31rpx 62rpx -15rpx rgba(0, 0, 0, 0.1);
  .custom-drop {
    flex: 1;
    min-width: 0;
  }
}
</style>
